<template>
  <Modal
    v-model:visible="uploader.show"
    width="420px"
    :closable="false"
    :footer="null">
    <div class="frame">
      <VuePictureCropper
        v-if="pic"
        :boxStyle="{
        height:'300px',
        width: '100%',
        backgroundColor: '#f8f8f8',
      }"
        :img="pic"
        :options="{
        viewMode: 1,
        dragMode: 'move',
        aspectRatio: 1
      }"
      />
      <div v-else>
        <div class="wrap">
          <div>替换</div>
          <div class="icon"
               :style="`background: url(${iconB64List[uploader.selected]}) 0 0 no-repeat`"/>
        </div>
      </div>

      <div class="wrap">
        <input type="file" id="upload1" style="display: none;" name="icon"
               accept="image/bmp,image/jpeg,image/png">

        <a-button block type="info" @click="select">选择图片</a-button>

        <div v-if="pic">
          <a-button block type="success" @click="submit">确定</a-button>
          <div class="tip">请使图片尽量填满取景框</div>
        </div>
      </div>
    </div>
  </Modal>
</template>

<script lang="ts" setup>
  import {ref, onMounted} from "vue"
  import VuePictureCropper, {cropper} from 'vue-picture-cropper'
  import {Modal, message} from 'ant-design-vue';

  const props = defineProps({
    uploader: Object,
    iconB64List: Array as PropType<string[]>,
  });

  const pic = ref<Nullable<string | ArrayBuffer>>(null)

  const select = () => {
    let btn = document.getElementById("upload1")
    if (btn!.bind === undefined) {
      btn!.bind = true
      btn!.addEventListener("change", ev => {
        let files = ev!.target!.files
        if (files.size !== 0) {
          let file = files[0]
          let Reader = new FileReader()
          Reader.readAsDataURL(file)
          Reader.onload = () => {
            pic.value = Reader.result
          }
        }
      })
    }
    btn!.click()
  }

  const submit = () => {
    cropper.getFile().then(file => {
      let cvs = document.createElement("canvas")
      cvs.width = 100
      cvs.height = 100

      let reader = new FileReader();
      reader.onload = function () {
        let ctx = cvs.getContext("2d")
        let oldImg = new Image;
        oldImg.src = props.iconB64List![props.uploader!.selected];
        oldImg.onload = function () {
          ctx!.drawImage(oldImg, 0, 0, 100, 100);
          ctx!.clearRect(0, 0, 80, 80)
          let newImg = new Image
          newImg.src = reader.result
          newImg.onload = function () {
            ctx!.drawImage(newImg, 0, 0, 80, 80);
            props.iconB64List![props.uploader!.selected] = cvs.toDataURL()
            pic.value = null
          }
        }
      };
      reader.readAsDataURL(file);
    })
  }

  let btn = document.getElementById("upload1")

</script>

<style scoped>
  .frame {
    width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    padding: 10px 0;
    gap: 8px;
    max-width: calc(100vw - 52px);
  }

  .tip {
    padding: 10px;
    text-align: center;
    color: #888888;
  }

  .icon {
    width: 80px;
    height: 80px;
    display: block;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 0 14px #f0f1f5;
  }

  .wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
</style>
